<template>
  <div class="forum-container">
    <CommonHeader />
    <!-- 顶部背景区域 -->
    <div class="forum-header">
      <div class="header-content">
        <h1>校园论坛</h1>
        <div class="search-box">
          <el-input
            v-model="searchQuery"
            placeholder="搜索感兴趣的内容..."
            prefix-icon="el-icon-search"
            @keyup.enter.native="handleSearch"
          >
            <el-select
              v-model="searchType"
              slot="append"
              style="width: 100px"
            >
              <el-option label="帖子" value="post" />
              <el-option label="用户" value="user" />
              <el-option label="标签" value="tag" />
            </el-select>
          </el-input>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 左侧帖子列表 -->
      <div class="post-list">
        <!-- 分类筛选 -->
        <div class="category-tabs">
          <el-tabs v-model="activeTab" @tab-click="handleTabChange">
            <el-tab-pane label="最新发布" name="latest" />
            <el-tab-pane label="最多评论" name="mostComments" />
            <el-tab-pane label="最多点赞" name="mostLikes" />
          </el-tabs>
        </div>

        <!-- 帖子列表 -->
        <div class="posts">
          <div 
            v-for="post in posts" 
            :key="post.id" 
            class="post-card"
            @click="goToDetail(post.id)"
          >
            <div class="post-author">
              <el-avatar :src="post.authorAvatar" size="small" />
              <span class="author-name">{{ post.authorName }}</span>
              <span class="post-time">{{ post.createTime }}</span>
            </div>
            <div class="post-content">
              <h3 class="post-title">{{ post.title }}</h3>
              <p class="post-summary">{{ post.content }}</p>
              <div class="post-cover" v-if="post.images">
                <el-image 
                  :src="post.images"
                  fit="cover"
                />
              </div>
            </div>
            <div class="post-footer">
              <div class="post-tags">
                <el-tag 
                  v-for="tag in post.tags"
                  :key="tag"
                  size="small"
                  effect="plain"
                >
                  {{ tag }}
                </el-tag>
              </div>
              <div class="post-stats">
                <span><i class="el-icon-view" /> {{ post.views }}</span>
                <span><i class="el-icon-chat-dot-round" /> {{ post.comments }}</span>
                <span><i class="el-icon-star-off" /> {{ post.likes }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :current-page.sync="currentPage"
            @current-change="handlePageChange"
          />
        </div>
      </div>

      <!-- 右侧边栏 -->
      <div class="sidebar">
        <!-- 发帖按钮 -->
        <el-button 
          type="primary" 
          class="create-post-btn"
          icon="el-icon-edit"
          @click="createPost"
        >
          发布新帖子
        </el-button>


   <!-- 热门话题 -->
   <div class="hot-topics">
      <h3>热门话题</h3>
      <div v-for="topic in hotTopics" :key="topic.id" class="topic-item">
        <span class="topic-name">{{ topic.name }}</span>
        <span v-if="topic.heat > 10000" class="explosion-badge">爆</span>
        <span :class="getFlameClass(topic.heat)" class="flame-icon">🔥</span>
        <span class="topic-heat">热度: {{ topic.heat }}</span>
      </div>
    </div>


        <!-- 活跃用户 -->
        <div class="active-users panel">
          <h3 class="panel-title">活跃用户</h3>
          <div class="user-list">
            <div 
              v-for="user in activeUsers" 
              :key="user.id"
              class="user-item"
            >
              <el-avatar :src="user.avatar" size="small" />
              <span class="user-name">{{ user.name }}</span>
              <span class="user-posts">{{ user.posts }}帖</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CommonHeader from '@/components/Header.vue'
import axios from 'axios'

export default {
  name: 'ForumPage',
  components: {
    CommonHeader
  },
  data() {
    return {
      searchQuery: '',
      searchType: 'post',
      activeTab: 'latest',
      currentPage: 1,
      total: 0,
      posts: [],
      hotTopics:[],
      hotTags: [
        { name: '学习', count: 128, type: '' },
        { name: '考试', count: 89, type: 'success' },
        { name: '活动', count: 76, type: 'warning' },
        { name: '美食', count: 65, type: 'danger' },
        { name: '闲聊', count: 54, type: 'info' }
      ],
      activeUsers: [
        { id: 1, name: '张三', avatar: 'avatar1.jpg', posts: 23 },
        { id: 2, name: '李四', avatar: 'avatar2.jpg', posts: 18 },
        { id: 3, name: '王五', avatar: 'avatar3.jpg', posts: 15 }
      ]
    }
  },
  created() {
    this.fetchPosts()
    this.fetchHotTopics()
  },
  methods: {
    handleSearch() {
      // 实现搜索逻辑
    },
    handleTabChange() {
      this.fetchPosts()
    },
    handlePageChange(page) {
      this.currentPage = page
      this.fetchPosts()
    },
    goToDetail(id) {
      this.$router.push(`/forum/post/${id}`)
    },
    createPost() {
      // 实现发帖逻辑
    },
    searchByTag(tag) {
      this.searchQuery = tag
      this.searchType = 'tag'
      this.handleSearch()
    },
    async fetchPosts() {
      try {
        const response = await axios.get('/api/posts', {
          params: {
            page: this.currentPage,
            size: 10,
            keyword: this.searchQuery,
            topicId: this.selectedTopicId,
            sortBy: this.activeTab
          }
        });
        if (response.data.code === 200) {
          this.posts = response.data.data;
          this.total = response.data.data.length; // 假设总数在响应中
        }
      } catch (error) {
        console.error('Error fetching posts:', error);
      }
    },
    async fetchHotTopics() {
      try {
        const response = await axios.get('/api/posts/hot-topics');
        if (response.data.code === 200) {
          this.hotTopics = response.data.data;
          console.log('Hot topics:', this.hotTopics); // 调试输出
        }
      } catch (error) {
        console.error('Error fetching hot topics:', error);
      }
    },
    getFlameClass(heat) {
      if (heat > 1000) {
        return 'flame-hot';
      } else if (heat > 500) {
        return 'flame-warm';
      } else {
        return 'flame-cool';
      }
    }
  }
}
</script>

<style scoped>
.forum-container {
  min-height: 100vh;
  background: #f5f6f7;
}

.forum-header {
  height: 200px;
  background: linear-gradient(120deg, #3498db, #2980b9);
  padding: 20px;
  color: white;
  
  .header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 40px;
    
    h1 {
      font-size: 32px;
      margin-bottom: 20px;
    }
    
    .search-box {
      max-width: 600px;
      margin: 0 auto;
    }
  }
}

.main-content {
  max-width: 1200px;
  margin: -50px auto 0;
  padding: 0 20px;
  display: flex;
  gap: 20px;
}

.post-list {
  flex: 1;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.post-card {
  padding: 20px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: all 0.3s;
  
  &:hover {
    background: #f9f9f9;
  }
  
  .post-author {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    
    .post-time {
      color: #999;
      font-size: 12px;
    }
  }
  
  .post-title {
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  .post-summary {
    color: #666;
    margin-bottom: 10px;
  }
  
  .post-cover {
    height: 200px;
    margin-bottom: 10px;
    border-radius: 4px;
    overflow: hidden;
  }
  
  .post-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .post-stats {
      display: flex;
      gap: 15px;
      color: #999;
      
      span {
        display: flex;
        align-items: center;
        gap: 4px;
      }
    }
  }
}

.sidebar {
  width: 300px;
  
  .create-post-btn {
    width: 100%;
    margin-bottom: 20px;
  }
  
  .panel {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    
    .panel-title {
      font-size: 16px;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid #eee;
    }
  }
  
  .tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    
    .tag-item {
      cursor: pointer;
      
      .tag-count {
        font-size: 12px;
        margin-left: 4px;
      }
    }
  }
  
  .user-list {
    .user-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 0;
      
      .user-posts {
        color: #999;
        font-size: 12px;
      }
    }
  }
}

.pagination {
  margin-top: 20px;
  text-align: center;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999; /* 确保弹窗在最上层 */
}

.modal-content {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px;
}

.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  gap: 20px;
}

.hot-topics {
  margin-top: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.topic-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.topic-name {
  font-weight: bold;
  flex: 1;
  display: flex;
  align-items: center;
}

.flame-icon {
  margin-left: 10px;
  font-size: 18px;
}

.flame-hot {
  color: red;
}

.flame-warm {
  color: orange;
}

.flame-cool {
  color: yellow;
}

.topic-heat {
  margin-left: 10px;
  color: #666;
  font-size: 14px;
}

.explosion-badge {
  margin-left: 5px;
  background-color: red;
  color: white;
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

</style>